<template>
  <div id="Header">
    <el-row id="firstline">
      <el-col :span="2" offset="1">
        <el-link :underline="false" type="primary" href="../Login/Login.js">
          请登录
        </el-link>
      </el-col>
      <el-col :span="2">
        <el-link :underline="false" type="primary"> 免费注册 </el-link>
      </el-col>
      <el-col :span="2" offset="13">
        <el-dropdown>
          <el-link
            href="/profile"
            class="el-dropdown-link"
            target="_blank"
            :underline="false"
            >工地中心<i class="el-icon-arrow-down el-icon--right"></i
          ></el-link>
          <!-- <span class="el-dropdown-link">
                    工地中心<i class="el-icon-arrow-down el-icon--right"></i>
                </span> -->
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <el-link
                href="/profile"
                class="el-dropdown-link"
                target="_blank"
                :underline="false"
                >我的订单</el-link
              ></el-dropdown-item
            >
            <el-dropdown-item>我的合同</el-dropdown-item>
            <el-dropdown-item>我的消息</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <el-col :span="2">
        <el-dropdown>
          <span class="el-dropdown-link">
            OEM中心<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>入驻平台</el-dropdown-item>
            <el-dropdown-item>我的任务</el-dropdown-item>
            <el-dropdown-item>我的消息</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <el-col :span="2">
        <el-link :underline="false" type="primary">
          <i class="el-icon-star-off"></i>
          收藏本站
        </el-link>
      </el-col>
    </el-row>
    <el-row id="firstline2">
      <el-col :span="1" offset="1">
        <el-link :underline="false" type="primary" href=""> 张先生 </el-link>
      </el-col>
      <el-col :span="1">
        <i class="el-icon-message"></i>
      </el-col>
      <el-col :span="2">
        <el-link :underline="false" type="primary"> 退出 </el-link>
      </el-col>
      <el-col :span="2" offset="13">
        <el-dropdown>
          <span class="el-dropdown-link">
            工地中心<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>我的订单</el-dropdown-item>
            <el-dropdown-item>我的合同</el-dropdown-item>
            <el-dropdown-item>我的消息</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <el-col :span="2">
        <el-dropdown>
          <span class="el-dropdown-link">
            OEM中心<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>入驻平台</el-dropdown-item>
            <el-dropdown-item>我的任务</el-dropdown-item>
            <el-dropdown-item>我的消息</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <el-col :span="2">
        <el-link :underline="false" type="primary">
          <i class="el-icon-star-off"></i>
          收藏本站
        </el-link>
      </el-col>
    </el-row>
    <el-row>
      <img src="../assets/images/u13191.png" alt="" class="advertise" />
    </el-row>
    <el-row class="line3">
      <el-col :span="3" offset="2">
        <img src="../assets/images/u13719.png" alt="" class="" />
      </el-col>
      <el-col :span="4" class="line3-title">建材一站式服务平台</el-col>
      <el-col :span="2">
        <div class="line3-city">郑州站</div>
        <el-link :underline="false" type="primary" class="line3-change"
          >【切换城市】</el-link
        >
      </el-col>
      <el-col :span="12">
        <el-input placeholder="请输入内容" v-model="input1">
          <template slot="prepend">全站搜索</template>
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-submenu index="2">
          <template slot="title" class="menufs">
            <el-link
              href="/buymaterials"
              target="_blank"
              style="font-size: 22px; color: white; font-family: SimSun"
              >建材选购</el-link
            >
          </template>
          <div class="selectbox">
            <div>
              <span
                style="
                  font-size: 10px;
                  color: #fff;
                  margin-left: 5px;
                  color: #169bd5;
                "
                >合同下单</span
              >
              <br />
              <el-tag type="info">旭辉运河悦章</el-tag>
              <el-tag type="info">旭辉运河悦章</el-tag>
            </div>
            <div
              class="line"
              style="height: 5px; width: 100%; color: #c9d1d8"
            ></div>
            <div>
              <span
                style="
                  font-size: 10px;
                  color: #fff;
                  margin-left: 5px;
                  color: #169bd5;
                "
                >普通下单</span
              >
              <br />
              <img
                src="../assets/images/u13770.png"
                alt=""
                class=""
                style="width: 20px; height: 20px; margin-left: 5px; float: left"
              />
              <span
                style="
                  font-size: 10px;
                  color: #fff;
                  margin-left: 5px;
                  color: #169bd5;
                  float: left;
                "
                >砂浆</span
              >
              <br />
              <el-tag type="info">水泥砂浆</el-tag>
              <el-tag type="info">混合砂浆</el-tag>
              <el-tag type="info">特种砂浆</el-tag>
              <el-tag type="info">其他砂浆</el-tag>
            </div>
          </div>
        </el-submenu>
        <el-menu-item index="1" class="menufs">首页</el-menu-item>
        <el-menu-item index="3" class="menufs">全部商品</el-menu-item>
        <el-menu-item index="4" class="menufs">平台服务</el-menu-item>
        <el-menu-item index="5" class="menufs">骆驼快讯</el-menu-item>
        <el-menu-item index="6" class="menufs">推广有礼</el-menu-item>
      </el-menu>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "Header",
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
    };
  },
  mounted() {
    var t = sessionStorage.getItem("ms_user");
    if (t == null) {
      // alert(t)
      document.getElementById("firstline").style.display = "block";
      document.getElementById("firstline2").style.display = "none";
    } else {
      document.getElementById("firstline").style.display = "none";
      document.getElementById("firstline2").style.display = "block";
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
<style scoped src="../style/Header.css">
#Header {
  height: 200px;
}
</style>